<template>
    <div>
        <!--仪表盘配置-->
        <div v-if="gaugeComponents.includes(config.chartType)">
            <a-form layout="vertical">
                <gauge-config></gauge-config>
                <toolbar-config></toolbar-config>
            </a-form>
        </div>
        <!--自定义图表配置-->
        <div v-else-if="config.chartType=='customChart'">
            <a-form layout="vertical">
                <custom-config></custom-config>
            </a-form>
        </div>
        <a-form layout="vertical" v-else>
            <theme-colors :colors="config.styles.colors" @themeColors="themeColors"></theme-colors>
            <!--图例组件配置-->
            <legend-config></legend-config>
            <!--柱状图配置-->
            <bar-config v-if="barComponents.includes(config.chartType)"></bar-config>
            <!--折线图配置-->
            <line-config v-if="lineComponents.includes(config.chartType)"></line-config>
            <!--X/Y轴配置-->
            <xy-axis-config v-if="barComponents.includes(config.chartType) || lineComponents.includes(config.chartType)"></xy-axis-config>
            <!--工具栏组件-->
            <toolbar-config></toolbar-config>
            <!--grid直角坐标系内绘图网格-->
            <grid-config v-if="screenData(config.chartType)"></grid-config>
            <!--tooltip提示框组件-->
            <tooltip-config></tooltip-config>
            <!--饼图配置-->
            <pie-config v-if="pieComponents.includes(config.chartType)"></pie-config>
            <!--漏斗配置-->
            <funnel-config v-if="config.chartType =='funnelChart'"></funnel-config>
            <!--雷达图-->
            <radar-config v-if="config.chartType =='radar'"></radar-config>
        </a-form>
        <div class="chart-enlarge">
            <span>{{ i18n('screen', '是否全屏') }}</span>
            <a-switch v-model:checked="config.styles.fullScreenShow" size="small"/>
        </div>
    </div>
</template>

<script>
import ThemeColors from "./theme-colors.vue"
import LegendConfig from "./legend-config.vue"
import BarConfig from "./bar-config.vue";
import LineConfig from "./line-config.vue";
import XyAxisConfig from "./xy-axis-config.vue";
import ToolbarConfig from "./toolbar-config.vue";
import GridConfig from "./grid-config.vue";
import TooltipConfig from "./tooltip-config.vue";
import PieConfig from "./pie-config.vue";
import GaugeConfig from "./gauge-config.vue";
import FunnelConfig from "./funnel-config.vue";
import CustomConfig from "./custom-config.vue";
import RadarConfig from "./radar-config.vue";

export default {
    name: "chartStyle",
    components: {
        CustomConfig,
        PieConfig,
        GridConfig,
        ToolbarConfig,
        XyAxisConfig,
        BarConfig,
        ThemeColors,
        LegendConfig,
        TooltipConfig,
        LineConfig,
        GaugeConfig,
        FunnelConfig,
        RadarConfig
    },
    props: {
        screenConfig: {
            type: Object,
            default: () => {
            }
        }
    },
    inject: {
        config: {
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {
            //柱状图组件
            barComponents: ["generalBar", "horizontalBar", "stackedBar", "lineBar"],
            //折线图组件
            lineComponents: ["lineChart", "areaChart", "stackedArea", "lineBar"],
            //饼图组件
            pieComponents: ["pieChart", "ringChart"],
            //仪表盘
            gaugeComponents: ["gaugeChart", "multiColorGauge"],
            colors: ['#4285f4', '#81c784', '#ffb74d', '#ff6464', '#ff8a65', '#eaff00', '#00ffd8', '#13aaf5', '#41d4fb', '#94ecfb'],//图表主题颜色
        }
    },
    created() {
        this.init();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "chartLang.common", key);
        },
        init() {
            debugger
            if(this.config.styles.joinMeasure===undefined){
                this.config.styles['joinMeasure'] = true
            }
            if (!this.config.styles.colors || this.config.styles.colors.length == 0) {
                this.config.styles["colors"] = this.screenConfig?JSON.parse(JSON.stringify(this.screenConfig.globalConfig.colors)):this.colors;
            }
            //自定义图表
            if (this.config.chartType == 'customChart' && !this.config.customConfig) {
                let customConfig = {
                    type: "config",
                    jsScript: "",
                    path: ""
                }
                this.config["customConfig"] = customConfig;
            }
            if (!this.config.styles.fullScreenShow) {
                this.config.styles["fullScreenShow"] = false;
            }
        },
        themeColors(time) {
            this.config.styles.colors = time;
        },
        screenData(type) {
            let list = ['generalBar', 'horizontalBar', 'stackedBar', 'lineChart', 'areaChart', 'stackedArea', 'lineBar'];
            if (list.includes(type)) {
                return true;
            } else {
                return false;
            }
        }
    },
    watch: {}
}
</script>

<style scoped>
.chart-enlarge {
    display: flex;
}

.chart-enlarge span {
    flex: 1;
    color: rgba(0, 0, 0, 0.85);
}
</style>
